<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="地表破裂带评估报告" name="first">
                <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px" v-show="showSearch">
                    <el-form-item label="评估编号" prop="num">
                        <el-input v-model="queryParams.num" placeholder="请输入评估编号" clearable />
                    </el-form-item>
                    <el-form-item label="评估人" prop="evaluateUserName">
                        <el-input v-model="queryParams.evaluateUserName" placeholder="请输入评估人" clearable />
                    </el-form-item>
                    <el-form-item label="审核状态" prop="checkStatus">
                        <el-select v-model="queryParams.checkStatus" placeholder="请选择审核状态" clearable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="省" prop="province">
                        <el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable
                            value-key="id">
                            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="市" prop="city">
                        <el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" clearable
                            value-key="id">
                            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="区/县" prop="area">
                        <el-select v-model="queryParams.area" placeholder="请选择区/县" @change="chooseCounty" clearable
                            value-key="id">
                            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" @click="handleQuery">搜索</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>

                <el-table v-loading="loading" :data="dataList" stripe tooltip-effect="light">
                    <el-table-column label="评估编号" align="center" prop="num" />
                    <el-table-column label="审核状态" align="center" prop="checkStatus">
                        <template #default="scope">
                            <span v-if="scope.row.checkStatus == '0'">未提交</span>
                            <span v-else-if="scope.row.checkStatus == '1'">审核中</span>
                            <span v-else-if="scope.row.checkStatus == '2'">退回修改</span>
                            <span v-else-if="scope.row.checkStatus == '3'">审核通过</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="评估人" align="center" prop="evaluateUserName" />
                    <el-table-column label="地区" align="center" prop="district" show-overflow-tooltip />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300px">
                        <template #default="scope">
                            <div v-if="scope.row.checkStatus == '1' || scope.row.checkStatus == '3'">
                                <el-button type="text" @click="handleCreat(scope.row)" v-if="scope.row.checkStatus == '1'&&!scope.row.systemCreateBreakReportName">生成报告</el-button>
                                <el-button type="text" @click="handleUpload(scope.row,1)">报告下载</el-button>
                            </div>
                            <div v-else>
                                <el-button type="text" @click="handleCreat(scope.row)" v-if="scope.row.checkStatus != '2'">生成报告</el-button>
                                <el-button type="text" @click="handleUpload(scope.row)">报告上传</el-button>
                                <el-button type="text" @click="handleUpload(scope.row,1)">报告下载</el-button>
                                <el-button type="text" @click="handleReview(scope.row)" v-if="scope.row.uploadBreakReportName">提交审核</el-button>
                                <el-button type="text" @click="handleCause(scope.row)" v-if="scope.row.checkStatus == '2'">退回原因</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page"
                    v-model:limit="queryParams.rows" @pagination="getList" />
            </el-tab-pane>
            <el-tab-pane label="滑坡/砂土液化/软土震陷评估报告" name="second">
                <el-form :model="queryParams1" ref="queryRef1" :inline="true" label-width="120px" v-show="showSearch1">
                    <el-form-item label="任务编号" prop="num">
                        <el-input v-model="queryParams1.num" placeholder="请输入任务编号" clearable />
                    </el-form-item>
                    <el-form-item label="任务名称" prop="taskName">
                        <el-input v-model="queryParams1.taskName" placeholder="请输入任务名称" clearable />
                    </el-form-item>
                    <el-form-item label="任务状态" prop="taskStatus">
                        <el-select v-model="queryParams1.taskStatus" placeholder="请选择任务状态" clearable>
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="省" prop="province">
                        <el-select v-model="queryParams1.province" placeholder="请选择省" @change="chooseProvince" clearable
                            value-key="id">
                            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="市" prop="city">
                        <el-select v-model="queryParams1.city" placeholder="请选择市" @change="chooseCity" clearable
                            value-key="id">
                            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="区/县" prop="area">
                        <el-select v-model="queryParams1.area" placeholder="请选择区/县" @change="chooseCounty" clearable
                            value-key="id">
                            <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" @click="handleQuery1">搜索</el-button>
                        <el-button @click="resetQuery1">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <right-toolbar v-model:showSearch="showSearch1" @queryTable="getList1"></right-toolbar>
                </el-row>

                <el-table v-loading="loading1" :data="dataList1" stripe tooltip-effect="light">
                    <el-table-column label="任务编号" align="center" prop="taskNum" />
                    <el-table-column label="任务名称" align="center" prop="taskName">
                        <template #default="scope">
                            <span @click="handleCause(scope.row)" v-if="scope.row.taskStatus=='2'" style="color: #F56C6C; cursor: pointer;">【退回原因】</span>
                            <span>{{scope.row.taskName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="任务状态" align="center" prop="taskStatus">
                        <template #default="scope">
                            <span v-if="scope.row.taskStatus == '0'">进行中</span>
                            <span v-else-if="scope.row.taskStatus == '1'">审核中</span>
                            <span v-else-if="scope.row.taskStatus == '2'">退回修改</span>
                            <span v-else-if="scope.row.taskStatus == '3'">已完成</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="评估人" align="center" prop="createUserName" />
                    <el-table-column label="任务地区" align="center" prop="taskDistrict" show-overflow-tooltip />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300px">
                        <template #default="scope">
                            <div v-if="scope.row.taskStatus == '1' || scope.row.taskStatus == '3'">
                                <el-button type="text" @click="handleCreat(scope.row,1)">报告下载</el-button>
                            </div>
                            <div v-else>
                                <el-button type="text" @click="handleCreat(scope.row)">生成报告</el-button>
                                <el-button type="text" @click="handleCreat(scope.row)">报告上传</el-button>
                                <el-button type="text" @click="handleCreat(scope.row,1)">报告下载</el-button>
                                <el-button type="text" @click="handleReview(scope.row)"
                                    v-if="scope.row.uploadMultipleReportName">提交审核</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total1 > 0" :total="total1" v-model:page="queryParams1.page"
                    v-model:limit="queryParams1.rows" @pagination="getList1" />
            </el-tab-pane>
        </el-tabs>

        <!-- 破裂带上传报告 -->
        <el-dialog :title="title" v-model="openReport" append-to-body @close="cancel">
            <h3><span></span>系统生成</h3>
            <table class="tableport">
                <tr>
                    <td class="title">评估报告</td>
                    <td class="content">
                        <template v-if="formData.systemCreateBreakReportName != ''">
                            <span @click="downloadPort('1', formData.diskSystemCreateBreakReportName,formData.dtbrId)" style="width:100%;float: left;" class="ellipsis">{{ formData.systemCreateBreakReportName }}</span>
                        </template>
                    </td>
                </tr>
            </table>
            <h3 style="display: inline-block;"><span></span>终版报告上传</h3>
            <p style="float: right;">
                <el-link type="primary" :underline="false" @click="viewHistoricalVer">历史版本查看</el-link>
            </p>
            <table class="tableport">
                <tr>
                    <td class="title">终版报告</td>
                    <td class="content">
                        <template v-if="formData.uploadBreakReportName">
                            <span @click="downloadPort('2', formData.diskUploadBreakReportName,formData.dtbrId)" style="width:300px;float: left;" class="ellipsis">{{ formData.uploadBreakReportName }}</span>
                        </template>
                        <div class="button" v-if="!isDownload">
                            <FileUpload ref="fileUpload" :isShowTip="false" reportType="pld"
                                :isShow="!formData.uploadBreakReportName" :num="queryParamsHis.num" @uploadSuccess='uploadSuccess' />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title">终版报告上传时间</td>
                    <td class="content">
                        <span>{{ formData.uploadBreakReportTime }}</span>
                    </td>
                </tr>
            </table>
            <p></p>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">关闭</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 滑坡  -->
        <el-dialog :title="title" v-model="openReport1" append-to-body @close="cancel">
            <h2>{{ form.taskName }}</h2>
            <h3><span></span>系统生成</h3>
            <table class="tableport">
                <tr>
                    <td class="title">评估报告</td>
                    <td class="content">
                        <template v-if="formData.systemCreateMultipleReportName != ''">
                            <span  @click="downloadPort('1', formData.diskSystemCreateMultipleReportName,formData.dtmrId)" style="width:300px;float: left;" class="ellipsis">{{ formData.systemCreateMultipleReportName }}</span>
                        </template>
                        <div class="button" v-if="!isDownload">
                            <el-button type="primary" plain @click="creatSampling"
                                v-if="!formData.diskSystemCreateMultipleReportName">生成报告</el-button>
                            <el-button type="primary" plain @click="creatSampling" v-else>重新生成</el-button>
                        </div>
                    </td>
                </tr>
            </table>
            <h3 style="display: inline-block;"><span></span>终版报告上传</h3>
            <p style="float: right;">
                <el-link type="primary" :underline="false" @click="viewHistoricalVer">历史版本查看</el-link>
            </p>
            <table class="tableport">
                <tr>
                    <td class="title">终版报告</td>
                    <td class="content">
                        <template v-if="formData.uploadMultipleReportName">
                            <span @click="downloadPort('2', formData.diskUploadMultipleReportName,formData.dtmrId)"  style="width:300px;float: left;" class="ellipsis">{{ formData.uploadMultipleReportName }}</span>
                        </template>
                        <div class="button" v-if="!isDownload">
                            <FileUpload ref="fileUpload" :isShowTip="false"
                                :isShow="!formData.uploadMultipleReportName" 
                                :num="queryParamsHis.num" :type="1"
                                @uploadSuccess='uploadSuccess' />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="title">终版报告上传时间</td>
                    <td class="content">
                        <span>{{ formData.uploadMultipleReportTime }}</span>
                    </td>
                </tr>
            </table>
            <p></p>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">关闭</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 上传进度展示 -->
        <el-dialog v-model="openCreate" title="正在生成报告" width="400px" :close-on-click-modal="false" append-to-body
            :show-close="false">
            <p></p>
            <div class="demo-progress">
                <el-progress :percentage="percentages" />
            </div>
            <div class="footer">
                <el-button plain @click="cancelUpload">取消生成</el-button>
            </div>
        </el-dialog>
        <!-- 历史版本查看 -->
        <el-dialog v-model="openViewHis" title="历史版本查看" width="850px" append-to-body>
            <p></p>
            <el-table v-loading="loading" :data="dataHistoryList" stripe style="width:100%">
                <el-table-column label="序号" align="center" type="index" width="60">
                    <template #default="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="报告名称" align="center" prop="reportName" width="360">
                    <template #default="scope">
                        <el-button type="text" @click="handleDownloadHistoryPort(scope.row)">{{
                            scope.row.reportName
                        }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="上传人" align="center" prop="uploadUserName" />
                <el-table-column label="上传时间" align="center" prop="uploadTime" />
            </el-table>
            <pagination v-show="totalHis > 0" :total="totalHis" v-model:page="queryParamsHis.page"
                v-model:limit="queryParamsHis.rows" @pagination="getHistoryList" />
            <p></p>
            <div class="footer">
                <el-button @click="openViewHis = false">关闭</el-button>
            </div>
        </el-dialog>
        <!-- 不通过 -->
        <el-dialog v-model="noPassOpen" v-if="noPassOpen" title="退回原因" width="900px" append-to-body>
        <p class="mt15"></p>
        <el-form ref="noPassRef" :model="form1" label-width="150px">
          <el-form-item label="不通过原因" prop="rejectAdvice">
            <el-input v-model="form1.rejectAdvice" type="textarea" maxlength="500" show-word-limit
              :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入不通过原因" disabled/>
          </el-form-item>
          <el-form-item label="附件" prop="attachmentId" v-if="form1.fileList.length">
            <fileUploadNoPass ref="fileUpload" v-model="form1.fileList"  :limit='1' :isShowTip="false" disabled></fileUploadNoPass>
        </el-form-item>
      </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="noPassOpen=false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
    </div>
</template>
  
<script setup name="reportManger">
import { getProvince, getChildArea } from "@/api/system/division";
import {
    getAllList, getReport, reportCreat, getHisList, submitReview,
    getList1Report, creatSamplingReport, getBackReportMsg
}
    from "@/api/resultManage/reportManger.js";
import FileUpload from './FileUpload/index.vue'
import fileUploadNoPass from '../reportReview/FileUpload';
const { proxy } = getCurrentInstance();

const router = useRouter();

const openCreate = ref(false);
const openViewHis = ref(false);
const percentages = ref(0);

// 地表破裂带评估报告
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);
const title = ref("");
const showSearch = ref(true);
const openReport = ref(false); // 报告上传开关
const options = [{ value: "0", label: "未提交" }, { value: "1", label: "审核中" }, { value: "2", label: "退回修改" }, { value: "3", label: "审核通过" }]; //审核状态

// 滑坡/砂土液化/软土震陷评估报告
const dataList1 = ref([]);
const loading1 = ref(false);
const total1 = ref(0);
const openReport1 = ref(false);
const showSearch1 = ref(true);
const options1 = [{ value: "0", label: "进行中" }, { value: "1", label: "审核中" }, { value: "2", label: "退回修改" }, { value: "3", label: "已完成" }]; //任务状态

const isDownload = ref(false) //下载报告开关
// 历史版本
const dataHistoryList = ref([]);
const totalHis = ref(0);

const provinceData = ref([]);//省
const cityData = ref([]);//市
const areaData = ref([]);//区、县
const activeName = ref('first')
const noPassOpen = ref(false);
const data = reactive({
    form: {
        administrativeLevel: '0',
        dataSource: 2,
        taskName: null,
        fileList: [],
    },
    form1:{},
    formData: {},
    queryParams: {
        page: 1,
        rows: 10,
        num: undefined,
        checkStatus: undefined,
        evaluateUserName: undefined,
        province: undefined,
        city: undefined,
        area: undefined,
    },
    queryParams1: {
        page: 1,
        rows: 10,
        num: undefined,
        taskName: undefined,
        checkStatus: undefined,
        province: undefined,
        city: undefined,
        area: undefined,
    },
    queryParamsHis: {
        page: 1,
        rows: 10,
        num: undefined,
        reportType: undefined,
    },
})
const { queryParams, queryParams1, queryParamsHis, form, form1, formData } = toRefs(data)

// 退回原因
function handleCause(row){
    getBackReportMsg(row.reportId,activeName.value).then(res=>{
        noPassOpen.value = true;
        form1.value = res.data;
        if(res.data.rejectFile&&res.data.rejectFile!=''){
            form1.value.fileList = [{
            fileName: res.data.rejectFile,
            savePath: res.data.reportSavePath, 
            realFileName:  res.data.rejectRealFile,
        }]
        }else{
            form1.value.fileList = []
        }

    })
}

// 提交审核
function handleReview(row) {
    submitReview(row.reportId,activeName.value).then(response => {
        proxy.$modal.msgSuccess("提交审核成功");
        if (activeName.value == "first") {
            getList();
        } else {
            getList1();
        }
    });
}

// 报告下载
function handleDownload(row){
    isDownload.value = true;
    title.value = '报告管理';
    if(activeName.value=='first'){
        queryParamsHis.value.reportType = '1';
        queryParamsHis.value.num = row.num;
        getReportData(row.reportId);
    }else{
        queryParamsHis.value.num = row.taskNum;
        queryParamsHis.value.reportType = '2';
    }
}

// 报告上传
function getReportData(id){
    getReport(id,activeName.value).then(res=>{
        if(activeName.value=='first'){
            openReport.value = true;
        }else{
            openReport1.value = true;
        }
        formData.value = res.data?res.data:{};
    })
}
function handleUpload(row,num){
    if(num&&num==1){
        isDownload.value = true;
    }else{
        isDownload.value = false;
    }
    title.value = '报告管理'
    if(activeName.value=='first'){
        queryParamsHis.value.reportType = '1';
        queryParamsHis.value.num = row.num;
        form.value.reportId = row.reportId;
        form.value.taskName = row.taskName;
        getReportData(row.reportId)
    }else{
        queryParamsHis.value.reportType = '2';
        queryParamsHis.value.num = row.taskNum;
    }
}

// 关闭按钮
function cancel(){
    if(activeName.value=='first'){
        openReport.value = false;
        getList();
    }else{
        openReport1.value = false;
        getList1();
    }
}

// 生成报告
function handleCreat(row,num){
    if(num&&num==1){
        isDownload.value = true;
    }else{
        isDownload.value = false;
    }
    // 地表破裂带
    if(activeName.value=='first'){
        queryParamsHis.value.num = row.num;
        queryParamsHis.value.reportType = '1';
        openCreate.value = true;
        percentages.value = 0;
        let startTime = setInterval(() => {
            if (percentages.value < 50) {
                percentages.value += 5;
            }
            if (percentages.value == 50) {
                clearInterval(startTime);
                let conductTime = setInterval(() => {
                    if (percentages.value == 95) {
                        clearInterval(conductTime);
                    }
                    if (percentages.value < 96) {
                        percentages.value += 2;
                    }
                }, 100)
            }
        }, 100)
        reportCreat({num:row.num}, cancelFunc).then(res => {
            percentages.value = 100;
            openCreate.value = false;
            const { code, data, message } = res
            if (code == 200 && data) {
                getList();
                clearInterval(startTime)
                proxy.$modal.msgSuccess(data)
            } else {
                proxy.$modal.msgError(message)
            }
        }).catch(err => {
            openCreate.value = false
            if (err.message !== '取消成功') {
                cancelFunc.c = null
            }
        })
    }else{
        queryParamsHis.value.reportType = '2';
        queryParamsHis.value.num = row.taskNum;
        getReportData(row.reportId);
    }
}
// 生成滑坡 报告
function creatSampling(){
    openCreate.value = true;
    percentages.value = 0;
    let startTime = setInterval(() => {
        if (percentages.value < 50) {
            percentages.value += 5;
        }
        if (percentages.value == 50) {
            clearInterval(startTime);
            let conductTime = setInterval(() => {
                if (percentages.value == 95) {
                    clearInterval(conductTime);
                }
                if (percentages.value < 96) {
                    percentages.value += 2;
                }
            }, 100)
        }
    }, 100)
    creatSamplingReport({taskNum:queryParamsHis.value.num}, cancelFunc).then(res => {
        percentages.value = 100;
        openCreate.value = false;
        const { code, data, message } = res
        if (code == 200 && data) {
            clearInterval(startTime)
            proxy.$modal.msgSuccess('成功生成报告');
            formData.value = data;
        } else {
            proxy.$modal.msgError(message)
        }
    }).catch(err => {
        openCreate.value = false
        if (err.message !== '取消成功') {
            cancelFunc.c = null
        }
    })
}
/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.page = 1;
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    dataList.value = [];
    cityData.value = [];
    areaData.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 搜索按钮操作 */
function handleQuery1() {
    queryParams1.value.page = 1;
    getList1();
}
/** 重置按钮操作 */
function resetQuery1() {
    dataList1.value = [];
    cityData.value = [];
    areaData.value = [];
    proxy.resetForm("queryRef1");
    handleQuery1();
}

// 重置表单
function reset() {
    formData.value = {};
    form.value = {
        administrativeLevel: '0',
        dataSource: 2,
        taskName: undefined,
        taskId: undefined,
    }
}

// 上传成功回调
function uploadSuccess(val) {
    console.log(val,'11111');
    formData.value = val.data;
}
// 下载报告
function downloadPort(type, name ,id) {
    if(activeName.value=='first'){
        proxy.download("/breakReport/downloadReport", {
            reportId: id,
            type: type,
        }, name);
    }else{
        proxy.download("/multiple/downloadReport", {
            reportId: id,
            type: type,
        }, name);
        
    }
   
}

// 获取历史版本
function getHistoryList() {
    getHisList(queryParamsHis.value).then(response => {
        dataHistoryList.value = response.data.rows;
        totalHis.value = response.data.total;
    })
}

// 获取序号
function getIndex(index) {
    return (queryParamsHis.value.page - 1) * queryParamsHis.value.rows + index + 1
}
// 历史版本查看
function viewHistoricalVer() {
    openViewHis.value = true;
    getHistoryList();
}
// 下载历史文件
function handleDownloadHistoryPort(row) {
    proxy.download("/breakReport/downloadHistoryReport", {
        dthrId: row.dthrId,
        }, row.reportName)
}
let cancelFunc = {}
// 取消生成
function cancelUpload() {
    if (typeof cancelFunc.c === "function") {
        cancelFunc.c('取消成功')
    }
    openCreate.value = false;
}

/** 获取省列表 */
function getProvinceData() {
    getProvince().then((response) => {
        provinceData.value = response.data;
    });
}

function chooseProvince(value) {
    if (activeName.value == 'first') {
        queryParams.value.city = null;
        queryParams.value.area = null;
        queryParams.value.province = value.name;
    } else {
        queryParams1.value.city = null;
        queryParams1.value.area = null;
        queryParams1.value.province = value.name;
    }
    cityData.value = [];
    areaData.value = [];
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}

function chooseCity(value) {
    if (activeName.value == 'first') {
        queryParams.value.city = value.name;
        queryParams.value.area = null;
    } else {
        queryParams1.value.city = value.name;
        queryParams1.value.area = null;
    }
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}

function chooseCounty(value) {
    if (activeName.value == 'first') {
        queryParams.value.area = value.name;
    } else {
        queryParams1.value.area = value.name;
    }
}

function handleClick(tab) {
    dataList.value = [];
    total.value = 0;
    if (tab.props.name == "first") {
        getList();
    } else {
        getList1();
    }
}

/** 查询报告任务列表 */
function getList() {
    loading.value = true;
    getAllList(queryParams.value).then(response => {
        dataList.value = response.data.rows;
        total.value = response.data.total;
        loading.value = false;
    });
}

// 获取滑坡/砂土液化/软土震陷评估报告列表
function getList1() {
    loading1.value = true;
    getList1Report(queryParams1.value).then(response => {
        console.log(response.data,'lallalla');
        dataList1.value = response.data.rows;
        total1.value = response.data.total;
        loading1.value = false;
    });
}

getProvinceData();
getList();
</script>
  
<style lang="scss" scoped>
h3 {
    color: #333;
    height: 21px;
    font-size: 14px;
    line-height: 21px;
    display: flex;
    align-items: center;
    font-weight: bold;

    span {
        margin-right: 12px;
        display: inline-block;
        width: 3px;
        height: 14px;
        background: #333;
    }
}

.tableport {
    border-collapse: collapse;
    width: 100%;
    tr {
        height: 54px;

        td {
            border: 1px solid #000;

            &.title {
                text-align: center;
                width: 250px;
                font-weight: 700;
                color: 16px;
            }

            &.content {
                padding: 0px 20px;
                height: 54px;
                line-height: 54px;
                .ellipsis{
                    display: inline-block;
                    color: #107ce5;
                    cursor: pointer;
                    /* 单行文本溢出省略号 */
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .button {
                    float: right;
                    height: 54px;
                    vertical-align: middle;
                }
            }
        }
    }

}

.demo-progress .el-progress--line {
    margin: 40px 0;
    // margin-bottom: 15px;
    width: 350px;
}

.footer {
    text-align: center;
    padding-bottom: 20px;
}
</style>